<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>弹窗</title>
  <style>
    .bg{
      position:fixed;
      background:#ddd;
      left:0;
      right:0;
      top:0;
      bottom:0;
    }
    .bg .mask{
      width:350px;
      height:250px;
      background:#fff;
      position:absolute;
      left:50%;
      margin-left:-175px;
      top:200px;
    }
    .bg span{
      font-size:30px;
      float:right;
      cursor:pointer;
      line-height:30px;
      margin-right:5px;
    }
    body{
      height:1500px;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="flg = true">弹出</button>
    <button @click="hide">点击</button>
    <child ref="child"></child>
    <!-- sync只是为了修改值 -->
    <log v-show="flg" :flg.sync="flg">
      <!-- slot -->
      <div slot="one">父组件添加内容1</div>
      <div slot="two">父组件添加内容2</div>
      <div slot="three">父组件添加内容3</div>
    </log>
    <!-- Component is="" 放什么组件就显示什么组件 -->
    <input type="radio" v-model="sel" value="com1">com1
    <input type="radio" v-model="sel" value="com2">com2

    <!-- 只能放一个组件，切换会销毁之前的组件，比较浪费性能 -->
    <!-- keep-alive 这样组件不会销毁，相当于缓存起来了，节约性能-->
    <keep-alive>
      <Component :is="sel"></Component>
    </keep-alive>
    

  </div>

  <template id="log">
    <div class="bg">
      <div class="mask">
        <span @click="close">x</span>
        <h1 v-show="flag">我是子组件</h1>
        第一
        <slot name="one"></slot>
        第二
        <slot name="two"></slot>
        第三
        <slot name="three"><div>如果没有显示，默认的东西</div></slot>
        <slot></slot>
      </div>
    </div>
  </template>

  <template id="temp1">
    <div>
      <h1 v-show="flag">我是子组件{{msg}}</h1>
      <h2 ref="h2">我是子组件标题2</h2>
    </div>
  </template>


  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    
    let log = {
      template: "#log",
      data(){
        return {
          flag: true
        }
      },
      methods:{
        close(){
          this.$emit('update:flg', false)
        }
      }
    }

    let comp1 = {
      template: '#temp1',
      data(){
        return {
          flag: true,
          msg: '字符'
        }
      },
      methods:{
        hide(){
          this.flag = !this.flag
        }
      },
      mounted(){
        console.log('子组件mounted')
        this.msg = 'zizujian'
      },
      created(){
        console.log('子组件created')
      },
      // 组件的数据修改，只会触发自己生命周期
      beforeUpdate(){
        console.log('beforeUpdate子组件')
      }
    }


    let com1 = {
      template: `
        <h2>我是com1</h2>
      `,
      destroyed(){
        console.log('com1已经销毁')
      }
    }
    let com2 = {
      template: `
        <h2>我是com2</h2>
      `,
      destroyed(){
        console.log('com2已经销毁')
      }
    }


    let vm = new Vue({
      el: '#app',
      data: {
        flg: false,
        sel: ''
      },
      components: {
        log,
        com1,
        com2,
        child: comp1
      },
      // 加载完成是在mounted中
      mounted(){
        // 在父组件的mounted中加一个this.$.nextTick(fn)
        // 获取自己或子组件元素，放到里面，保证拿到的是最新渲染的
        console.log('父组件mouted')
        setTimeout(()=>{
          // this.$refs.loading.hide()
        }, 1000)



        // this.$nextTick(()=>{
        //   console.log(this.$refs.child.$refs.h1.innerHTML)
        // })
      },
      created(){
        console.log('父组件created')
      },
      methods:{
        hide(){
          // 父组件中执行子组件的方法
          this.$refs.child.hide()
          this.$refs.child.$refs.h2.style.color = "red"
        }
      },
      // 组件的数据修改，只会触发自己生命周期
      beforeUpdate(){
        console.log('beforeUpdate父组件')
      }

    })
    






    /**
      
      凭什么把时间青春浪费在你身上

      不要说教，表达相同感觉，tiaopi

      表达式向他人传递我们内心思想感情，让他人理解我们的思想感情

      心理包裹：总想表现好，害怕出丑
      现在你们的联系只能通过百度新闻，综艺节目联系了吗
      互相了解，信任有相同的感觉或体验的感觉

      聊韩剧，聊美食
        你没有看过这个韩剧，也没有认识的明星，感觉都聊不下去了，
        聊这个看韩剧的软件，
      问题出在哪里
          1，氛围紧张和尴尬，彼此都fengkuang寻找话题，自身的情绪紧张感染到彼此，
              解决：让自己轻松，自然的介绍自己和询问对方信息，
                    0，主动介绍自己的经历，高中，大学，培训，和朋友的一些有趣的
                    1，这个问题我想和你聊。2，自然而然的就能把话说下去，不需要费
                    给自己的话设置足够多关键词；充分挖掘关键词
          2，当有话题时，不知道怎么接，草草两句结束
          3，不会主动寻找话题
    */ 
  </script>
</body>
</html>